<template>
  <view class="ltr">
    <view :style="{marginTop: systemInfo.statusBarHeight + 'px', height: '80rpx'}"/>
    <view
        :class="['custom-nav-bar', isScrolled ? 'scrolled' : '']"
        :style="{paddingTop: systemInfo.statusBarHeight+ 10 +'px', zIndex: 999}">
      <view class="flex-center">
        <view v-if="isHome">
          <switch-lang/>
        </view>
        <image v-else lazy-load src="/static/icon/home/tengfei_logo.png" class="img"/>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from "vuex";
import heraaLangSwitch from "@/components/heraa-lang-switch/index.vue";
import SwitchLang from "@/components/switch-lang/switch-lang.vue";

export default {
  components: {SwitchLang, heraaLangSwitch},
  props: {
    isScrolled: {
      type: Boolean,
      default: false
    },
    isHome: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(["systemInfo"]),
  },
}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  position: fixed;
  background: linear-gradient(146deg, rgba(255, 255, 255, 1) 15%, rgba(215, 222, 233, 1) 85%);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;

  &.scrolled {
    //background: rgba(255, 255, 255, 0.5);
    background: linear-gradient(146deg, rgba(255, 255, 255, 0.6) 15%, rgba(215, 222, 233, 0.4) 85%);
  }

  .img {
    width: 86px;
    height: 20px;
  }
}
</style>
